<template>
	<view class="content">
		<view class="pageHeader">

			<view>系统消息</view>


			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view class="regoodbox">
			<view>
				<view v-for="(item,index) in systemlist" :key="index" style="margin-bottom:4upx;background-color: #fff;padding: 26upx 30upx;margin: 30upx 20upx;border-radius:20upx">
					<view style="display: flex;position: relative;">
						<view class="dt">
							<view class="data">{{item.add_time_time|subyear}}</br>
								<view class="time">{{item.add_time_time|subday}}</view>
							</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: space-between;flex:3;color: #333;">
							<view class="goods-info" style="font-size:30upx;">
								{{item.title}}
							</view>
							<view style="color: #666666;font-size: 24upx;margin-top: 22upx;line-height: 40upx;">

								<text v-html='item.detail '></text>

							</view>
						</view>

					</view>
				</view>
				<view class="loading">{{loadingText}}</view>
			</view>

		</view>
	</view>
</template>
<script>
	import postAjax from '../../../API/postAjax.js'
	var that, page = 0,
		timer = null;
	export default {
		data() {
			return {
				loadingText: '加载中...',
				userToken: '', // token

				content: "APP系统升级,升级时间为219年11月23日 14:30-11月24日14:30.升级期间app时不可使 用,如有紧急问题请及时联系客服进行处理,望 请该解...APP系统升级,升级时间为219年11月23日 14:30-11月24日14:30.升级期间app时不可使 用,如有紧急问题请及时联系客服进行处理,望 请该解...",
				systemlist: {},

			}
		},
		filters: {

			subyear(value) {
				if (!value) return ''

				return value.slice(0, 4)

			},
			subday(value) {
				if (!value) return ''

				return value.slice(5, 10)

			}
		},

		onLoad(options) {
			that = this
			page = 0;
			that.userToken = uni.getStorageSync('token')

			that.SystemNotice()

		},
		onPullDownRefresh: function() {
			that.SystemNotice();
		},
		onReachBottom: function() {
			console.log(page);
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				that.getmorenews();
			}, 1000);
		},
		computed: {

		},
		methods: {
			getmorenews: function() {
				let that = this
				console.log("-------------------------" + that.loadingText);
				if (that.loadingText != '' && that.loadingText != '加载更多') {
					return false;
				}
				that.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				postAjax('/Message/Index', {
					token: that.userToken,
					page: page
				}, function(data) {

					that.loadingText = '';
					console.log(data.data.data.length + "------");
					if (data.data.data.length == 0) {
						uni.hideNavigationBarLoading();
						that.loadingText = '已加载全部';
						return false;
					}
					page++;

					that.systemlist = that.systemlist.concat(data.data.data);
					that.loadingText = '加载更多';
					uni.hideNavigationBarLoading();
				});

			},
			// 返回上一页
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			//
			SystemNotice() {
				let that = this
				uni.showNavigationBarLoading();
				postAjax('Message/Index', {
					token: that.userToken,
					page: 0
				}, function(data) {
					console.log(data)
					that.systemlist = data.data.data;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					that.loadingText = '加载更多';

				})
			},

		}
	}
</script>

<style>
	.loading {
		text-align: center;
		line-height: 80px;
		font-size: 30upx;
		color: #666;
	}

	.content {
		min-height: 100vh;
		background-color: #F9F9F9;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.pageHeader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 108upx;
		background-color: #1D84E8;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.regoodbox {
		padding: 140upx 0upx 0upx;
	}

	.total-wrap {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 20upx;
	}

	.logistics-title {
		position: relative;
		box-sizing: border-box;
		padding: 16upx 0;
		border-bottom: 2upx solid #EEEEEE;
		line-height: 28upx;
		color: #4B4B4B;
		font-size: 26upx;
		font-family: 'PingFangSC-Medium';
		text-align: left;
	}

	.dt {

		width: 148upx;

	}

	.data {
		font-size: 28upx;

		color: #333333;

	}

	.time {
		font-size: 24upx;
		color: #999999;

	}
</style>
